<template>
<div class="container">
	<Box caption="修改密码" class="box">
		<div class="box__container">
			<div class="box__left">
				<el-form :model="resetForm"   ref="resetPass" label-width="100px" class="demo-ruleForm" size="normal">
					<el-form-item label="旧密码">
						<el-input v-model="resetForm.originPass" placeholder="请输入旧密码" type="password" @input="changeStatus" maxLength="16" show-password></el-input>
					</el-form-item>
					<el-form-item label="新密码">
						<el-input v-model="resetForm.newPass" placeholder="请输入新密码" type="password" @input="changeStatus" show-password></el-input>
					</el-form-item>
					<el-form-item label="重复密码">
						<el-input v-model="resetForm.repeatPass" placeholder="请再次输入密码" type="password" @input="changeStatus" show-password></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary"   :disabled="!check6" round @click="submit">提交</el-button>
						<el-button type="primary" @click="$router.push('/home')" round>返回</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="box__right">
				<p>新密码必须包含</p>
				<el-checkbox v-model="check0">大写字母</el-checkbox>
				<el-checkbox v-model="check1">小写字母</el-checkbox>
				<el-checkbox v-model="check2">至少一位数字</el-checkbox>
				<el-checkbox v-model="check3">至少一位特殊符号 如@、$、&</el-checkbox>
				<el-checkbox v-model="check4">8-16位</el-checkbox>
				<el-checkbox v-model="check5">避免连续使用四位相同字符</el-checkbox>
			</div>
		</div>
	</Box>
</div>
</template>

<script>
import Box from '../../../components/pc/Box'
export default {
  name: "reset",
	components:{
  	  Box
	},
	data() {
		return {
			// 是否改变
      isChange:false,
			// 是否提交
			isSubmit:false,
			resetForm: {
				originPass: '',
				newPass: '',
				repeatPass: ''
			},
		}
	},
	created() {
  	this.isSubmit = false;
  	this.isChange = false;
	},
	// 路由离开守卫
	beforeRouteLeave(to , from , next){
		// 如果已提交或未修改 则可以离开
		if(this.isSubmit || !this.isChange){
			next();
		}else{
			// 如果已修改或未提交 则弹窗提示
			this.changeTips();
			next(false);
		}
	},
	methods:{
  	// 提交
		async submit() {
				await this.$Http.changePwd(this.$qs.stringify({
					id:this.$store.state.userData.id,
					oldPwd:this.resetForm.originPass,
					password:this.resetForm.newPass
				})).then(res =>{
					if(res.code === 'SUCCESS'){
						this.isSubmit = true;
						this.$message({
							message:'修改成功，请重新登录！',
							type:'success'
						})
						// 退出
						this.$Http.loginOut().then(res =>{
							this.$router.push('/')
						})
					}else {
						this.$message.error(res.message)
					}
				})
		},
		// 修改改变状态
    changeStatus(){
			this.isChange =true;
		},
		// 修改提醒
    changeTips() {
			this.$confirm('检测到未提交的内容，是否在离开页面前提交修改？', '确认信息', {
						distinguishCancelAndClose: true,
						confirmButtonText: '提交',
						cancelButtonText: '放弃修改'
					})
					.then(() => {
						// 进行提交
						this.submit();
					})
					.catch(action => {
						// 如何是选择放弃保存并离开页面
						if(action === 'cancel'){
							this.isChange = false;
							this.$router.push('/home');
						};
						this.$message({
							type: 'info',
							message: action === 'cancel'
									? '放弃提交并离开页面'
									: '停留在当前页面'
						})
					});
		},
	},
	computed:{
		// 校验条件
		// 大写字母
		check0(){
		  let r0 = /[A-Z]/;
		  return r0.test(this.resetForm.newPass);
	  },
		// 小写字母
		check1(){
  		let r1 = /[a-z]/;
  		return r1.test(this.resetForm.newPass)
		},
		// 至少一位数字
		check2(){
			let r2 = /[0-9]/;
			return r2.test(this.resetForm.newPass)
		},
		// 至少一位特殊符号 如@、$、&
		check3(){
			let r3 = /[@$&]/;
			return r3.test(this.resetForm.newPass)
		},
		// 8-16位
		check4(){
  		return(
			  this.resetForm.newPass.length>= 8 &&
			  this.resetForm.newPass.length<= 16
		)
		},
		// 避免使用四位相同字符
		check5(){
			let r4 = /([A-Za-z0-9@$&])\1{3}/;
			return this.resetForm.newPass&&!r4.test(this.resetForm.newPass)
		},
		//符合条件并且重复密码相同
		check6(){
			return(
					this.check0 &&
					this.check1 &&
					this.check2 &&
					this.check4 &&
					this.check5 &&
					this.resetForm.newPass === this.resetForm.repeatPass
			)
		}
	}
}


</script>

<style scoped lang="scss">
.container{
	.box__container{
		display: flex;
		.box__left,.box__right{
			flex: 1;
			margin: 40px 20px;
		}
		.box__left{
			display: flex;
			justify-content: center;
			align-items: center;
			border-right: solid 3px #e0e0e0 ;
			.el-form{
				width: 65%;
				min-width: 350px;
				.el-button{
					margin: 0 10px;
				}
			}
		}
		.box__right{
			padding-bottom: 50px;
			display: flex;
			flex-direction:column ;
			justify-content: space-evenly;
			margin-left: 50px;
		}

	}
}
</style>
